<template>
  <div class="hot-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >博物馆</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="nav flex border-bottom font24">
      <span class="flex-1 border-left" :class="{'active':showType=='fwz'}" @click="show('fwz')">非物质文化遗产</span>
      <span class="flex-1 border-left" :class="{'active':showType=='db'}" @click="show('db')">地理标志产品</span>
      <span class="flex-1 border-left" :class="{'active':showType=='zh'}" @click="show('zh')">中华老字号</span>
      <span class="flex-1" :class="{'active':showType=='df'}" @click="show('df')">重庆老字号</span>
    </div>
    <!--广告1-->
    <div class="ad bwg" v-show="showType=='db'">
      <img class="img-padding" v-for="item in db" :src="item.url" width="100%" @click="detail(item)">
    </div>
    <div class="ad" v-show="showType=='df'">
      <img class="img-padding" v-for="item in df" :src="item.url" width="100%" @click="detail(item)">
    </div>
    <div class="ad" v-show="showType=='fwz'">
      <img class="img-padding" v-for="item in fwz" :src="item.url" width="100%" @click="detail(item)">
    </div>
    <div class="ad" v-show="showType=='zh'">
      <img class="img-padding" v-for="item in zh" :src="item.url" width="100%" @click="detail(item)">
    </div>
  </div>
</template>
<script>
  let db = [
    {url: '../../../static/images/bwg/db/1.jpg', categoryId: 10, brandId: 10268},
    {url: '../../../static/images/bwg/db/2.jpg', categoryId: 2, brandId: 10355}
  ]
  let df = [
    {url: '../../../static/images/bwg/df/1.jpg', categoryId: 3, brandId: 10301},
    {url: '../../../static/images/bwg/df/2.jpg', categoryId: 2, brandId: 10352},
    {url: '../../../static/images/bwg/df/3.jpg', categoryId: 4, brandId: 10270},
    {url: '../../../static/images/bwg/df/4.jpg', categoryId: 10, brandId: 10279}
  ]
  let fwz = [
    {url: '../../../static/images/bwg/fwz/1.jpg', categoryId: 2, brandId: 10363},
    {url: '../../../static/images/bwg/fwz/2.jpg', categoryId: 8, brandId: 10272},
    {url: '../../../static/images/bwg/fwz/3.jpg', categoryId: 2, brandId: 10349},
    {url: '../../../static/images/bwg/fwz/4.jpg', categoryId: 1, brandId: 10315}
  ]
  let zh = [
    {url: '../../../static/images/bwg/zh/1.jpg', categoryId: 3, brandId: 10293},
    {url: '../../../static/images/bwg/zh/2.jpg', categoryId: 1, brandId: 10324}
  ]
    export default {
        props: {},
        data() {
            return {
              db: db,
              df: df,
              fwz: fwz,
              zh: zh,
              showType: 'df'
            };
        },
        methods: {
            show: function(type){
               this.showType = type;
            },
            detail: function(item){
               this.$router.push({name: 'goodsListCate', params: {brandId: item.brandId, cateId: item.categoryId}});
            }
        },
        filters: {},
        created() {

        },
        mounted(){

        },
        components: {
        }
    };
</script>
<style lang="less">
  @import "./hot.less";
  .img-padding{
    padding: .2rem .2rem 0;
    background-color: #fff;
    box-sizing: border-box;
  }
  .font24{
    font-size: .24rem;
  }
</style>
